<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
    .main_box {
        position: relative;
        overflow: hidden;
        /*margin-left: 400px;*/
        margin: 0 auto;
        text-align: center;
    }

    .box {
        display: inline-block;
        position: relative;
    }

    .text_area {
        width: 500px;
        height: 500px;
        font-size: 18px;
    }

    .but_box {
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        height: 24px;
        width: 80px;
        padding: 8px;
        color: #535886;
        background: rgba(158, 155, 171, 0.9);
    }

    .special-box {
        display: inline-block;
        width: 100px;
        overflow: hidden;
        padding-right: 15px;
        height: 500px;
        position: relative;
    }

    .but {
        cursor: pointer;
        border-radius: 4px;
        background: #cfd6e2;
        text-align: center;
        padding-bottom: 25px;
        display: block;
    }

    #clear {
        position: absolute;
        bottom: 0;
    }

    .bigger_font {
        font-size: 26px;
    }
</style>
<body>
<div>
    <div class="main_box">
    <span class="box">
        <textarea id="left" class="text_area"></textarea>
    </span>
    <span class="special-box">
        <span class="box but_box but" id="add" onclick="convertAdd()">
            <span class="but_cont bigger_font">+</span>
        </span>
        <span class="box but_box but" id="sql_in_add">
            <span class="but_cont">add ,</span>
        </span>
        <span class="box but_box but" id="sql_in_add2">
            <span class="but_cont">add '',</span>
        </span>
        <span class="box but_box but" onclick="clearSqlAppend()">
            <span class="but_cont">clear SQL append</span>
        </span>
        <span class="box but_box but" id="clear">
            <span class="but_cont">clear</span>
        </span>
        <span class="box but_box but" id="vertical2horizontal">
            <span class="but_cont">逗号拼接</span>
        </span>
    </span>
        <span class="box">
        <textarea id="right" class="text_area"></textarea>
    </span>
    </div>
</div>
<div class="waifu">
    <div class="waifu-tips"></div>
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
    <div class="waifu-tool">
        <span class="fui-home"></span>
        <span class="fui-chat"></span>
        <span class="fui-eye"></span>
        <span class="fui-user"></span>
        <span class="fui-photo"></span>
        <span class="fui-info-circle"></span>
        <span class="fui-cross"></span>
    </div>
</div>

<script src="assets/waifu-tips.js"></script>
<script src="assets/live2d.js"></script>
<script type="text/javascript">initModel("assets/")</script>
</body>
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        $("#clear").click(function () {
            var right = $("#right").val();
            if (right != null && right != '' && right != undefined) {
                $("#right").val("");
            } else {
                $("#left").val("");
            }
        });

        /*$("#add").click(function () {
            var left_text = $("#left").val();
            var left_arr = left_text.replace(/\n/gm, ',\n').split(",");
            var temp = 0;
            for (var i = 0; i < left_arr.length; i++) {
                temp += parseInt(left_arr[i]);
            }
            $("#right").val(temp);
        });*/

        $("#sql_in_add").click(function () {
            var left = $("#left").val();
            // $("#right").val(left_text.replace(/###[^\n]+/gm, '').split('\n').join(',' + '\n'));
            $("#right").val(left.replace(/\n/gm, ',\n'));
        });

        $("#sql_in_add2").click(function () {
            var left = $("#left").val();
            var arr = left.split("\n");
            for (var i = 0; i < arr.length; i++) {
                arr[i] = "'" + arr[i] + "',"
            }
            var new_str = arr.join('\n');
            $("#right").val(new_str.substr(0, new_str.length - 1));
        });


        function clearSqlAppend() {
            var oldText = removeAllDouble(document.getElementById("left").value);
            var arr = oldText.split('\n');
            for (var item in arr) {
                var tempStr = arr[item].substring(arr[item].indexOf("(\"") + 2);
                arr[item] = tempStr.substring(0, tempStr.indexOf("\")"));
            }
            var newText = arr.join('\n');
            newText = newText.substr(0, newText.length - 1);
            document.getElementById("right").value = newText;
        }

        function convertAdd() {
            var oldText = document.getElementById("left").value;
            var arr = oldText.split('\n');
            var totalNumber = 0;
            for (var item in arr) {
                totalNumber = numAdd(totalNumber, arr[item]);
            }
            document.getElementById("right").value = totalNumber;
        }

        function numAdd(num1, num2) {
            var baseNum, baseNum1, baseNum2;
            try {
                baseNum1 = num1.toString().split(".")[1].length;
            } catch (e) {
                baseNum1 = 0;
            }
            try {
                baseNum2 = num2.toString().split(".")[1].length;
            } catch (e) {
                baseNum2 = 0;
            }
            baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
            var precision = (baseNum1 >= baseNum2) ? baseNum1 : baseNum2;//精度
            return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision);
        };

        function removeAllSpace(str) {
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }

        function removeAllDouble(str) {
            return str.replace(/\\\"/g, "");
        }

        $("#vertical2horizontal").click(function () {
            var oldText = document.getElementById("left").value;
            var arr = oldText.split('\n');
            var newText = arr.join(",")
            document.getElementById("right").value = newText;
        });
    });
</script>
</html>